<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <!-- Site Properties -->
  <title>Http 测试工具</title>

  <link rel="stylesheet" type="text/css" href="./static/lib/semantic/semantic.css">

  <script src="./static/lib/semantic/assets/jquery-2.1.3.js"></script>
  <script src="./static/lib/semantic/assets/jquery.zclip.min.js"></script>
  <script src="./static/lib/semantic/semantic.js"></script>
  <script src="./static/lib/jsonformat/c.js" type="text/javascript"></script>
  <link href="./static/lib/jsonformat/s.css" type="text/css" rel="stylesheet"></link>
  <script>
  $(document).ready(function() {
      // fix main menu to page on passing
      $('.main.menu').visibility({
        type: 'fixed'
      });
	  
      // show dropdown on hover
      $('.main.menu  .ui.dropdown').dropdown({
        on: 'hover'
      });
	  
    });
  </script>

  <style type="text/css">
  body {
    background-color: #FFFFFF;
  }
  .main.container {
    margin-top: 2em;
  }
  .logo{
      height:50px;
  }
  .main.menu {
    margin-top: 4em;
    border-radius: 0;
    border: none;
    box-shadow: none;
    transition:
      box-shadow 0.5s ease,
      padding 0.5s ease
    ;
  }
  .main.menu .item img.logo {
    margin-right: 1.5em;
  }
  .main.menu.fixed {
    background-color: #FFFFFF;
    border: 1px solid #DDD;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
  }
  .content{
      width:90%;
	  max-width:900px;
	  margin:0 auto;
	  margin-top:-50px;
  }
  
  </style>

</head>
<body>
  
  <!--MENU-->
  <div class="ui borderless main menu">
    <div class="ui text container" >
	  <img class="logo" src="./static/logo.png">
      <a href="./index" class="item">
        Http请求测试
      </a>
      <a href="./jsonformat" class="item active">Josn在线解析</a>
      <!--
      <a href="#" class="ui right floated dropdown item">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Link Item</div>
          <div class="item">Link Item</div>
          <div class="divider"></div>
          <div class="header">Header Item</div>
          <div class="item">
            <i class="dropdown icon"></i>
            Sub Menu
            <div class="menu">
              <div class="item">Link Item</div>
              <div class="item">Link Item</div>
            </div>
          </div>
          <div class="item">Link Item</div>
        </div>
      </a>-->
    </div>
  </div>
  

  <!--CONTENT-->
  <div class="content">
	 <div class="ui form">
	  <h4 class="ui dividing header">JSON 在线解析工具</h4>
	  <div class="HeadersRow">
		  <textarea id="RawJson">
		  </textarea>
	  </div>
	 </div>
	
	<div id="ControlsRow">
	  <input type="Button" value="格式化" onclick="Process()"/>
	  <span id="TabSizeHolder">
	    缩进量
	    <select id="TabSize" onchange="TabSizeChanged()">
	      <option value="1">1</option>
	      <option value="2" selected="true">2</option>
	      <option value="3">3</option>
	      <option value="4">4</option>
	      <option value="5">5</option>
	      <option value="6">6</option>
	    </select>
	  </span>
	  <label for="QuoteKeys">
	    <input type="checkbox" id="QuoteKeys" onclick="QuoteKeysClicked()" checked="true" /> 
	    引号
	  </label>&nbsp; 
	  <a href="javascript:void(0);" onclick="SelectAllClicked()">全选</a>
	  &nbsp;
	  <span id="CollapsibleViewHolder" >
	      <label for="CollapsibleView">
	        <input type="checkbox" id="CollapsibleView" onclick="CollapsibleViewClicked()" checked="true" /> 
	        显示控制
	      </label>
	  </span>
	  <span id="CollapsibleViewDetail">
	    <a href="javascript:void(0);" onclick="ExpandAllClicked()">展开</a>
	    <a href="javascript:void(0);" onclick="CollapseAllClicked()">叠起</a>
	    <a href="javascript:void(0);" onclick="CollapseLevel(3)">2级</a>
	    <a href="javascript:void(0);" onclick="CollapseLevel(4)">3级</a>
	    <a href="javascript:void(0);" onclick="CollapseLevel(5)">4级</a>
	    <a href="javascript:void(0);" onclick="CollapseLevel(6)">5级</a>
	    <a href="javascript:void(0);" onclick="CollapseLevel(7)">6级</a>
	    <a href="javascript:void(0);" onclick="CollapseLevel(8)">7级</a>
	    <a href="javascript:void(0);" onclick="CollapseLevel(9)">8级</a>
	  </span>
	</div>
	
	<div id="Canvas" class="Canvas"></div>
	   	
  </div>

  <script type="text/javascript" src="./static/lib/jsonformat/m.js"></script>
</body>

</html>